import Vue from "vue";
import Vuex from "vuex";
import { Plugins } from "webpack-chain";

//引入模块Store 
import Cart from "./Cart";

import Products from "./Product";

// 引入插件
import timeTravel from './plugins/timeTravel'

//引入持久化储存的插件
import createPersistedState from "vuex-persistedstate"


Vue.use(Vuex);

export default new Vuex.Store({
  
  //状态  组件共享的时候放进state
  state: {
    user:'李白',
    num:'222',
    products:[],
    msg:'李白打野吗'
  },

   //用于变更状态
   //更改vuex中状态的唯一方式就是提交mutation
  //mutations中的属性 都是有一个type和一个handle处理函数组成
  mutations: {
    //一般要大写
    //接收state和payload(核载  传递的参数)作为参数
    //只能做同步操作
    INCREMENT_NUM(state,payload){
      state.num++
    },
  DECREMENT_NUM(state,payload){
    state.num--
  },
  SET_PRODUCT(state,payload){
    state.products= payload
  }
  },

    //用于异步操作
  actions: {
    //actions 定义的时候也是有一个类型type对应一个处理函数
    //这个处理函数接收context和payload作为参数
    GET_PRODUCT(context,payload){
      console.log(context);
      console.log(payload);
      fetch('http://chst.vip/data/index.json')
      .then(body => body.json())
      .then(res=>{
        console.log(res);
        //commit回调SET_PRODUCT
        context.commit('SET_PRODUCT',res.data)
      })

    }
  },

 //数据预处理(相当于vuex的计算属性)
 getters: {
    reversMsg(state){

      
      return state.msg.split("").reverse().join("")
    }
},



  //模块化
  modules: {
    Cart,
    Products
  },
  
//插件
Plugins:[timeTravel,createPersistedState({
   // 存储方式：localStorage、sessionStorage、cookies
   storage: window.localStorage,
   // 存储的 key 的key值
   key: "2204",
   paths:['products','user']
})]
});

